<template>
  <div class="searchs">
    <van-nav-bar
      fixed
      left-arrow
      @click-left="$router.back()"
      title="搜索音乐"
    />
    <div class="search_wrap">
      <van-search
        @input="dosearch"
        v-model.trim="key"
        placeholder="请输入搜索关键词"
        shape="round"
      />
      <div v-if="key == ''">
        <div class="hot_title">✨热门搜索🩸</div>
        <div class="hot">
          <div
            class="hotText"
            v-for="(item, index) in hotSearchList"
            :key="index"
            @click="dosearch(item.first)"
          >
            <span class="text">{{ item.first }}</span>
          </div>
        </div>
      </div>
      <div
        class="searchList"
        v-else
      >
        <div class="hot_title">✨最佳匹配🩸</div>
        <van-cell
          :title="item.name"
          :label="item.ar[0].name + ' - ' + item.name"
          center
          v-for="item in SearchList"
          :key="item.id"
          @click="$router.push({ name: 'play', query: { id: item.id } })"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon
              name="play-circle-o"
              size="20"
            />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { hotSearchListAPI, SearchListAPI } from '@/api'
export default {
  name: 'searchs',
  data() {
    return {
      key: '',
      hotSearchList: [],

      SearchList: [], // 搜索列表
      timer: '' // 防抖
    }
  },
  methods: {
    dosearch(item) {
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        //  点击热词搜索
        // if (item) { // vant组件van-search会判断是否为空，所以直接赋值即可(不需要if判断)
        this.key = item
        // }
        // 删除输入框
        if (this.key === '') {
          return (this.SearchList = [])
        }
        let res = await SearchListAPI({ keywords: this.key })
        //  确保官网数据不为空
        if (res.data.result && res.data.result.songs) {
          this.SearchList = res.data.result.songs
          // console.log(this.SearchList)
        } else {
          this.SearchList = []
        }
      }, 200)
    }
  },
  async created() {
    let res = await hotSearchListAPI()
    // console.log(res)
    this.hotSearchList = res.data.result.hots
  }
}
</script>

<style lang='less'>
.searchs {
  padding-top: 95px;
  margin-bottom: 50px;

  /* 搜索容器的样式 */
  .search_wrap {
    padding: 0.266667rem;
  }

  /*热门搜索文字标题样式 */
  .hot_title {
    font-size: 0.32rem;
    color: #666;
  }

  /* 热搜词_容器 */
  .hot_name_wrap {
    margin: 0.266667rem 0;
  }

  /* 热搜词_样式 */
  .hot_item {
    display: inline-block;
    height: 0.853333rem;
    margin-right: 0.213333rem;
    margin-bottom: 0.213333rem;
    padding: 0 0.373333rem;
    font-size: 0.373333rem;
    line-height: 0.853333rem;
    color: #333;
    border-color: #d3d4da;
    border-radius: 0.853333rem;
    border: 1px solid #d3d4da;
  }
  .van-search {
    margin-top: -45px;
    margin-bottom: 15px;
    padding: 0;
  }
  .hotText {
    float: left;
    /* position: absolute; */
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 35px;
    font-size: 14px;
    border: 1px solid #dee1e6;
    height: 28px;
    /* width: 50px; */
    margin: 10px 9px 0 0px;
    padding: 0 10px 0;
  }
}
</style>
